<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>j</title>
	<link rel="stylesheet" href="css/cs.css" type="text/css">
	
</head>
<body>
<table border="1">
	<!--表头-->
	<thead>
		<tr class="header">
			<th colspan="5" class="tableheader">采购清单</th>
		</tr>
		<tr>
			<th>序号</th>
			<th>商品名称</th>
			<th>单价</th>
			<th>数量</th>
			<th>操作</th>
		</tr>
	</thead>

	<!--表体-->
	<tbody>
		<tr>
			<td>1</td>
			<td>商品a</td>
			<td>11</td>
			<td>1</td>
			<td>
				<button class="delItem">删除</button>
				<button class="addItem">添加</button>
			</td>
		</tr>	

		<tr>
			<td>2</td>
			<td>商品b</td>
			<td>51</td>
			<td>3</td>
			<td>
				<button class="delItem">删除</button>
				<button class="addItem">添加</button>
			</td>
		</tr>	

		<tr>
			<td>3</td>
			<td>商品c</td>
			<td>26</td>
			<td>4</td>
			<td>
				<button class="delItem">删除</button>
				<button class="addItem">添加</button>
			</td>
		</tr>	

		<tr>
			<td>4</td>
			<td>商品d</td>
			<td>11.5</td>
			<td>9</td>
			<td>
				<button class="delItem">删除</button>
				<button class="addItem">添加</button>
			</td>
		</tr>	

		<tr>
			<td>5</td>
			<td>商品e</td>
			<td>31.5</td>
			<td>6</td>
			<td>
				<button class="delItem">删除</button>
				<button class="addItem">添加</button>
			</td>
		</tr>	

		<tr>
			<td>6</td>
			<td>商品f</td>
			<td>45</td>
			<td>20</td>
			<td>
				<button class="delItem">删除</button>
				<button class="addItem">添加</button>
			</td>
		</tr>	

		<tr>
			<td>7</td>
			<td>商品g</td>
			<td>22</td>
			<td>21</td>
			<td>
				<button class="delItem">删除</button>
				<button class="addItem">添加</button>
			</td>
		</tr>
		<tr>
			<td colspan="5">
				<p >总计:￥<span id="sum" style="color: green"></span></p>
			</td>
		</tr>	
	</tbody>
</table>

<p><span  style="font-size: 38px;color: green"></span></p>


<div class="shade" style="display:none;">
	<div class="form-panel">
		<h5 class="form-header">添加商品</h5>
		<div class="form-inner">
			<input name="goods" type="text" value="" placeholder="请输入商品名称"><br>
			<input name="price" type="text" value="" placeholder="请输入商品单价"><br>
			<input name="num" type="text" value="" placeholder="请输入商品数量"><br>
			<div class="ops">
				<button id="addBtn">确定</button>
				<button id="missBtn">取消</button>
			</div>
		</div>

		<div class="cha">
			<san class="iconfont icon-guanbi" style="color: #fff"></san>
		</div>

	</div>
</div>


<script type="text/javascript" src="js/jquery-3.1.1.js"></script>

<script type="text/javascript">

	/*定义一个统计函数*/
	var calcSum =  function(){
		var sum =0;
		$('tbody tr').each(function(){
			var price = $(this).find('td:eq(2)').text();
			var num = $(this).find('td:eq(3)').text();
			var total = price*num;
			sum +=total;
		})

		$('#sum').text(sum);
	};

	calcSum();
	
	$('tbody tr:odd').addClass('even');

	/*
      eq(0)         等于
      gt(0)         大于
      lt(1)         小于
      $("tbody tr:gt(1):lt(5)").css("background-color","green");
    */
   
   /*隐藏弹框*/
    $(".cha").click(function(){
      	$(".shade").hide();
      	$('input[name=goods]').val('');
      	$('input[name=price]').val('');
      	$('input[name=num]').val('');
      });

	$('.addItem').click(function(){
		$('.shade').show();
	});

	
	$('#missBtn').click(function(){
		$('.shade').hide();
	})

	var showForm = function(){
		$('.shade').show();
	}



	$('.delItem').click(function(){
		/*删除排序*/
		$(this).parent().parent().remove();

		/*调整一下奇偶的样式*/
		$('tbody tr').removeClass();
		$('tbody tr:odd').addClass('even');

		/*调整序号*/
		for(var i=0;i<$('tbody tr').length-1;i++){
			$('tbody tr:eq(' +i+')').find('td:first').text(i+1);
		}

		/*重新计算总和*/
		calcSum();

	})



	var delTr =  function(btn){

		$(btn).parent().parent().remove();

		calcSum();
	}

	$('#addBtn').click(function(){
		var goodsname = $('input[name=goods]').val();
		var price = $('input[name=price]').val();
		var num =  $('input[name=num]').val();

		/*清空输入框**/
		$('input[name=goods]').val('');
		$('input[name=price]').val('');
		$('input[name=num]').val('');

		var ntr= $('tbody tr').length;
		var sn = $('tbody tr:eq('+(ntr-2)+')').find('td:first').text();


		/*把表单的值追加到表格的指定位置*/
		var tr = '<tr><td>'+(sn*1+1)+'</td><td>'+goodsname+'</td><td>'+price+'</td><td>'+num+'</td><td><button class="delItem" onclick="delTr(this)">删除</button>\
			<button onclick="showForm()">添加</button></td></tr>';

		/*往表格中插入一行*/
		$('tbody tr:eq('+(ntr-2)+')').after(tr);

		/*隐藏表单的输入层*/
		$('.shade').hide();

		calcSum();

	});

	$('.canclebtn').click(function(){
		$('.shade').hide();
	})

</script>
</table>
</body>
</html>
